<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>路由设置</title>
<link rel="stylesheet" type="text/css" href="../../../css/reset.css">
<link rel="stylesheet" type="text/css" href="../../../css/css.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../../css/colorReset.css" />
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
	fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img {
	border: 0;
}

address, caption, cite, code, dfn, em, th, var {
	font-weight: normal;
	font-style: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
}

q:before, q:after {
	content: '';
}

abbr, acronym {
	border: 0;
}

a {
	color: #000;
	text-decoration: none;
	outline: none
}

a:hover {
	color: #09F;
	text-decoration: none
}

body {
	background: #FFFFFF;
	overflow: auto;
}

.content {
	display: none;
	padding: 20px;
	/*overflow: hidden;*/
	min-width: 790px;
	width: 790px;
	margin: 0 auto;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}

.clearfix { *+
	height: 1%;
}

.left {
	float: left;
	position: relative;
	text-align: center;
	height: auto;
}

.left li {
	padding: 10px 0 10px 60px;
	overflow: hidden;
	min-width: 130px;
}

.left li .img_icon {
	display: block;
	float: left;
}

.left li .img_icon p {
	padding: 5px 0 0 0;
}
/*.left li .small_line{
	float:left;
	width:120px;
	height:2px;
	margin:0 0 0 10px;
	background:#8B8B8B;	
}*/
.left li .small_line {
	float: left;
	background: url(../../../images/jiantou.jpg) left top no-repeat;
	height: 40px;
	width: 100px;
	margin: 0 30px;
}

.left .line_col {
	width: 2px;
	position: absolute;
	background: #8B8B8B;
	right: 0px;
	top: 0px;
}

.right {
	margin: 0 0 0 120px;
	z-index: -1;
}

.middle {
	float: left;
	width: 100px;
	height: auto;
	overflow: hidden;
	z-index: -1;
	display: none;
}

.middle .img_icon, .middle .line {
	float: left;
}

.middle .img_icon p {
	text-align: center;
	padding: 5px 0 0 0;
}
/*.right .line{
	width:120px;
	height:2px;
	margin:0 10px;
	background:#8B8B8B;
}*/
.middle .line {
	width: 100px;
	background: url(jiantou.jpg) left top no-repeat;
	height: 40px;
	margin: 0 30px;
}

img {
	width: 100px;
}

.main {
	overflow: hidden;
}

.left_menu {
	float: left;
	width: 22%;
	min-height: 410px;
	/*border:1px solid #95B8E7;*/
	overflow: hidden;
}

.tree_con {
	min-height: 340px;
	overflow: auto;
	margin: 0 auto;
	padding-top: 10px;
}

.menu_tit {
	margin-bottom: 0;
}

.search-con {
	background: #f0fbff;
	border-bottom: 1px solid #d1d8de;
	padding: 5px 0;
	line-height: 26px;
}

.search-con .text {
	width: 110px;
	height: 20px;
	line-height: 20px;
	border-radius: 0;
}

.left_menu .text {
	/*border: 1px solid #95B8E7;*/
	border: 1px solid #d3d8d9;
	padding: 2px 3px;
}

.right_con {
	float: right;
	width: 77%;
	min-height: 410px;
	position: relative;
	/*border:1px solid #95B8E7;*/
}

.easyui-validatebox text {
	align: left;
}

.tree-node-selected {
	background: #ffe48d;
	color: #000000;
}

.right_c {
	overflow: hidden;
}

.right_content {
	overflow: hidden;
	overflow-y: auto;
}

#ifName {
	display: block;
	height: 25px;
	line-height: 25px;
	font-weight: bold;
	border: 1px solid #000;
	border-left: none;
	overflow: hidden;
}

.ifNameC {
	float: left;
	width: 47%;
	padding: 0 0 0 2%;
	height: 25px;
	line-height: 25px;
	border-left: 1px solid #000;
	background-color: #f0fbff;
}
</style>

</head>

<body>

	<div class="main">

		<div class="left_menu">
			<div class="menu_tit">领域系统结构</div>
			<div class="hidden search-con">
				<label for="systemName" style="margin-left: 10px;" class="fl">名称：</label>
				<input id="systemName" name="systemName" class="text fl" /> <a
					href="javascript:void(0);" id="searchNode" name="searchNode"
					class="default_btn fl" style="width: 60px; display: block">定位</a>
			</div>
			<div class="tree_con">
				<ul id="tt"></ul>
			</div>
		</div>
		<div class="right_c">
			<div id="ifName">
				<div class="ifNameC" id="interfaceName">接口名称：</div>
				<div class="ifNameC" id="interfaceType">接口类型：</div>
			</div>
			<div class="right_content">

				<div class="content">
					<div class="left">
						<ul id="appSystem">
						</ul>
					</div>
					<div class="middle">
						<div class="img_icon">
							<img src="../../../images/ESB.jpg" alt="" />
							<p>ESB平台</p>
						</div>
					</div>
					<div class="left right">
						<ul id="pubSystem">
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>

	</div>
	<script type="text/javascript" src="/webjars/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../../js/cook/constants.js"></script>
	<script type="text/javascript" src="../../../js/cook/public.js"></script>
	<script type="text/javascript" src="../../../js/cook/FormValidate.js"></script>
	<script type="text/javascript"
		src="../../../js/esb/RoutingManagement/RoutingShow.js"></script>

	<script type="text/javascript">
		$(document)
				.ready(
						function(e) {
							$(".left_menu, .right_con").css("height",
									($("body").height() - 25) + "px");
							$(".tree_con").css("height",
									($("body").height() - 95) + "px");

							$(".left_menu, .right_con_second").css("height",
									($("body").height() - 25) + "px");
							$(".tree_con").css("height",
									($("body").height() - 95) + "px");
							$(".right_content").height(
									$(".left_menu").outerHeight());
							$(".content").css("display", "block");
							$(".small_line").css(
									"margin-top",
									($(".img_icon").outerHeight() - $(
											".small_line").outerHeight()) / 2);
							var marginL = ($(".right_content").outerWidth() - $(
									".content").outerWidth()) / 2;
							if (marginL < 0) {
								marginL = 10;
							}
							if ($(".right_content").outerWidth() < $(document)
									.outerWidth()) {
								$(".middle")
										.css(
												{
													"position" : "fixed",
													"top" : ($(".right_content")
															.outerHeight() - $(
															".middle")
															.outerHeight()) / 2 + 38,
													"left" : $(".left")
															.outerWidth()
															+ marginL
															+ $(".left_menu")
																	.outerWidth()
															+ 29 + "px"
												});
							} else {
								$(".middle")
										.css(
												{
													"position" : "fixed",
													"top" : ($(".right_content")
															.outerHeight() - $(
															".middle")
															.outerHeight()) / 2 + 38,
													"left" : $(".left")
															.outerWidth()
															+ marginL
															+ $(".left_menu")
																	.outerWidth()
															+ 29 + "px"
												});
							}

							if ($(".right_content").outerHeight() < $(".left")
									.outerHeight()) {
								//$(".content").outerHeight($(".right_content").outerHeight());
								var diffH = ($(".content").outerHeight()
										- $(".left").outerHeight() - 40) / 2;
								if (diffH < 0) {
									diffH = 40;
								}
								if ($(".right_content").outerHeight() > $(
										".right").outerHeight()) {
									$(".left").css({
										"top" : diffH
									});
								} else {
									$(".rileftght").css({
										"top" : 0
									});
								}
							} else {
								$(".left").css(
										{
											"position" : "fixed",
											"top" : ($(".right_content")
													.outerHeight() - $(".left")
													.outerHeight()) / 2 + 38,
											"left" : marginL
													+ $(".left_menu")
															.outerWidth()
													+ "px"
										});
							}
							if ($(".right_content").outerHeight() < $(".right")
									.outerHeight()) {
								var diffH = ($(".content").outerHeight()
										- $(".right").outerHeight() - 40) / 2;
								if (diffH < 0) {
									diffH = 40;
								}
								$(".right").removeAttr("style");
								if ($(".right_content").outerHeight() > $(
										".left").outerHeight()) {
									$(".right").css({
										"top" : diffH,
										"left" : $(".left").outerWidth() + "px"
									});
								} else {
									if ($(".left").css("position") == "fixed") {
										$(".right").css({
											"top" : 0
										});
									} else {
										if ($(".left").outerHeight() > $(
												".right").outerHeight()) {
											$(".left")
													.css(
															{
																"top" : ($(
																		".content")
																		.outerHeight()
																		- $(
																				".left")
																				.outerHeight() - 40) / 2
															});
											$(".right")
													.css(
															{
																"top" : ($(
																		".content")
																		.outerHeight()
																		- $(
																				".right")
																				.outerHeight() - 40) / 2
															});
										} else {
											$(".left")
													.css(
															{
																"top" : ($(
																		".content")
																		.outerHeight()
																		- $(
																				".left")
																				.outerHeight() - 40) / 2
															});
											$(".right").css({
												"top" : diffH
											});

										}

									}

								}
							} else {
								$(".right")
										.css(
												{
													"position" : "fixed",
													"top" : ($(".right_content")
															.outerHeight() - $(
															".right")
															.outerHeight()) / 2 + 38,
													"left" : $(".left")
															.outerWidth()
															+ marginL
															+ $(".left_menu")
																	.outerWidth()
															+ "px"
												});
							}

							if ($(".right_content").outerHeight() > $(
									".content").outerHeight()) {
								$(".content").outerHeight(
										$(".right_content").outerHeight());
							}

							$(".line").css(
									"margin-top",
									($(".right").outerHeight() - $(".line")
											.outerHeight()) / 2);
						});
	</script>
</body>
</html>